<template>
  <div class="container">
    <!-- 空白框 -->
    <div class="empty-box" @click="activateInput">
      <input v-if="isInputActive" v-model="searchQuery" @blur="deactivateInput" @keyup.enter="handleSearch" class="search-input" placeholder="搜索..."/>
      <span v-else class="search-text">搜索</span>
    </div>
    <!-- 标题 -->
    <h2>职务信息</h2>
    <!-- 职务列表 -->
    <ul class="job-list">
      <li v-for="(job, index) in jobs" :key="index" class="job-item-container">
        <span @click="handleJobClick(job)" class="job-item">{{ job }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'JobList',
  data() {
    return {
      jobs: [
        '游戏',
        '传媒',
        '汽车',
        '餐饮',
        '互联网',
        '医疗'
      ],
      isInputActive: false, // 控制输入框是否激活
      searchQuery: '' // 搜索查询
    };
  },
  methods: {
    activateInput() {
      this.isInputActive = true;
      this.$nextTick(() => {
        this.$refs.searchInput.focus();
      });
    },
    deactivateInput() {
      this.isInputActive = false;
    },
    handleSearch() {
      alert(`搜索: ${this.searchQuery}`);
      // 可以在这里处理搜索逻辑
      this.deactivateInput();
    },
    handleJobClick(job) {
      if (job === '游戏') {
        this.$router.push({ name: 'game' });
      }
      else if (job === '传媒') {
        this.$router.push({ name: 'media' });
      }
      else if (job === '汽车') {
        this.$router.push({ name: 'car' });
      }
      else if (job === '餐饮') {
        this.$router.push({ name: 'catering' });
      }
      else if (job === '互联网') {
        this.$router.push({ name: 'internet' });
      }
      else if (job === '医疗') {
        this.$router.push({ name: 'medical' });
      }else {
        alert(`查看 ${job} 详情`);
      }
    }
  }
};
</script>

<style scoped>
/* 整个页面的背景 */
.container {
  background-image: url('@/assets/bg.jpg'); /* 添加背景图片 */
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中对齐 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  min-height: 100vh; /* 设置最小高度为视口高度 */
  padding: 20px; /* 添加内边距 */
}

/* 空白框的样式 */
/* 空白框的样式 */
.empty-box {
  width: 50%; /* 让空白框占据全宽的一半 */
  margin-left: auto; /* 左侧外边距自动，以实现居中 */
  margin-right: auto; /* 右侧外边距自动，以实现居中 */
  height: 60px; /* 设置空白框的高度 */
  background-color: rgba(255, 255, 255, 0.9); /* 背景颜色 */
  margin-bottom: 20px; /* 空白框和标题之间的间距 */
  display: flex; /* 使用 flexbox 布局 */
  align-items: center; /* 垂直居中对齐内容 */
  padding-left: 10px; /* 左边内边距 */
  cursor: pointer; /* 指针样式 */
  position: relative; /* 相对定位，以便绝对定位子元素 */
  z-index: 10; /* 确保在背景之上 */
}

/* 搜索文本样式 */
.search-text {
  font-size: 18px; /* 设置字体大小 */
  color: #333; /* 设置文字颜色 */
}

/* 搜索输入框样式 */
.search-input {
  width: 100%; /* 输入框宽度为全宽 */
  height: 100%; /* 输入框高度为全高 */
  border: none; /* 去掉边框 */
  padding: 0 10px; /* 内边距 */
  font-size: 18px; /* 字体大小 */
  background-color: #f0f0f0; /* 背景颜色 */
  box-sizing: border-box; /* 包含内边距和边框 */
  position: absolute; /* 绝对定位以覆盖空白框 */
  left: 0;
  top: 0;
}

/* 职务列表样式 */
.job-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  gap: 10px; /* 项目之间的间距 */
}

/* 职务项目容器 */
.job-item-container {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9); /* 增加不透明度，使背景颜色更醒目 */
  border: 2px solid #000; /* 黑色边框 */
  border-radius: 8px; /* 圆角效果 */
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(33.333% - 10px); /* 计算宽度，使每行有三个项目，减去间距 */
  height: 150px; /* 固定高度 */
  box-sizing: border-box; /* 包含边框和内边距在内 */
}

/* 职务项样式 */
.job-item {
  cursor: pointer;
  color: #000; /* 黑色文字 */
  text-decoration: none;
  font-size: 18px; /* 职务文字大小 */
}

/* 职务项悬停样式 */
.job-item:hover {
  color: #555; /* 悬停时文字颜色 */
}
</style>